<template>
    <el-dialog v-model="open" width="68%" align="left" style="background-color: #f1f1f1;" draggable>
        <div class="exports">
            <div class="mb-20 f20">
                <p>Export</p>
            </div>
            <div style="width:90%; margin: 0 auto;">
                <el-radio-group v-model="exportState" @change="(val) => { emits('getExcelId', val) }" class="ml-4">
                    <el-radio :label="1" size="large">Invoice</el-radio>
                    <el-radio :label="2" size="large">PI</el-radio>
                </el-radio-group>
            </div>
            <div style="width:90%; margin: 0 auto;" v-if="exportState == 1">
                <div>
                    <el-radio-group v-model="radio">
                        <el-radio :label="1">KERNAL</el-radio>
                        <el-radio :label="2">QIANMIAO</el-radio>
                        <el-radio :label="3">KOLLWIN</el-radio>
                        <el-radio :label="4">LABOT</el-radio>
                    </el-radio-group>
                </div>
                <div class="mt-10">
                    <img v-if="radio == 1" :src="utils.imgbs64(1)" alt="">
                    <img v-if="radio == 2" :src="utils.imgbs64(2)" alt="">
                    <img v-if="radio == 3" :src="utils.imgbs64(3)" alt="">
                    <img v-if="radio == 4" :src="utils.imgbs64(4)" alt="">
                </div>
            </div>
            <div style="width:90%; margin: 0 auto;" v-if="exportState == 2">
                <div>
                    <el-radio-group v-model="radio1">
                        <el-radio :label="excelids[0].config_id">{{ excelids[0].config_short }}</el-radio>
                        <el-radio :label="excelids[1].config_id">{{ excelids[1].config_short }}</el-radio>
                        <el-radio :label="excelids[2].config_id">{{ excelids[2].config_short }}</el-radio>
                        <el-radio :label="excelids[3].config_id">{{ excelids[3].config_short }}</el-radio>
                    </el-radio-group>
                </div>
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="() => { downloadStudent(exportState) }" type="primary"
                    style="border:1px solid #6193D2;color:#ffffff">Export</el-button>
                <el-button style="border:1px solid #6193D2;background-color:#ffffff;color:#6193D2"
                    @click="closeWindow">Cancel</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script  setup>
import { ref } from 'vue'
import saveAs from 'file-saver'
import Excel from 'exceljs'
import * as utils from "../../utils.js"
const prpos = defineProps({
    excelids: Object,
    exportPImodels: Object,
    invoiceInfo: Object,
    capitalTotal: Object,
    order_id: Number,
    token: String
})
const emits = defineEmits(['getExcelId'])
const open = ref(false)
const radio = ref(1)
const radio1 = ref(10012)
const exportState = ref(1)
const dialogopen = () => {
    open.value = true
}
const closeWindow = () => {
    open.value = false
}
const downloadStudent = (val) => {
    if (val == 1) {
        const header = ['Model No', 'Commodity&description', 'Qty(PCS)', 'Unit Price(USD)', 'Amount(USD)']
        const columns = header.map((item) => {
            return {
                header: item,
                key: item,
            }
        })
        exportFile(header, columns, prpos.exportPImodels, `Invoice${utils.ftime(new Date().getTime())}`)
    } else if (val == 2) {
        let url = 'http://f-api.files99.com/qmapi/orders/exportPI'
        document.location.href = `${url}?token=${prpos.token}&config_id=${radio1.value}&order_id=${prpos.order_id}`
    }
    exportState.value = 1
    open.value = false
}
defineExpose(
    {
        open,
        dialogopen,
    }
)
const exportFile = (header, columns, dataList, expertName) => {
    const EXCEL_TYPE =
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
    const workbook = new Excel.Workbook()
    workbook.created = new Date()
    workbook.modified = new Date()
    const worksheet = workbook.addWorksheet('PI')
    worksheet.properties.defaultColWidth = 20
    worksheet.columns = columns
    // 第一行
    worksheet.getRow(1).values['']
    worksheet.getRow(1).height = 70
    worksheet.getCell('A1').value = ''
    worksheet.mergeCells('A1:E1')
    const imageId2 = workbook.addImage({
        base64: utils.imgbs64(radio.value),
        extension: 'png',
    })
    worksheet.addImage(imageId2, {
        tl: { col: 0.6, row: 0.8 },
        ext: { width: 600, height: 60 },
        editAs: 'undefined'
    });
    // 第二行
    worksheet.getRow(2).values['']
    worksheet.getCell('A2').value = 'COMMERCLAL INVOICE'
    worksheet.mergeCells('A2:E2')
    // 第三行
    worksheet.getRow(3).values['']
    worksheet.getCell('A3').value = 'DATE :'
    worksheet.getCell('B3').value = utils.ftime1(prpos.invoiceInfo.CreateTime * 1000)
    worksheet.getCell('C3').value = ''
    worksheet.getCell('D3').value = 'Invoice NO:'
    worksheet.getCell('E3').value = prpos.invoiceInfo.PI_name
    // 第四行
    worksheet.getRow(4).values['']
    worksheet.getCell('A4').value = ''
    worksheet.getCell('D4').value = 'Tracking Numbers:'
    worksheet.getCell('E5').value = ''
    worksheet.mergeCells('A4:C4')
    // 第五行
    worksheet.getRow(5).values['']
    worksheet.getCell('A5').value = 'ATTN:'
    worksheet.getCell('B5').value = ''
    worksheet.mergeCells('B5:E5')
    //第六行
    worksheet.getRow(6).values['']
    worksheet.getCell('A6').value = 'Address:'
    // worksheet.getCell('B6').value = prpos.invoiceInfo.address + prpos.invoiceInfo.address + prpos.invoiceInfo.address
    worksheet.getCell('B6').value = 'Room 315, Jinguyuan Park, Yumiao Road, Buji Street, Longgang District, Shenzhen, Guangdong, China'
    worksheet.mergeCells('B6:C6')
    worksheet.mergeCells('D6:E6')
    // 第七行
    worksheet.getRow(7).values['']
    worksheet.getCell('A7').value = 'Company:'
    worksheet.getCell('B7').value = prpos.invoiceInfo.companyName
    worksheet.mergeCells('B7:E7')
    // 第八到十行
    worksheet.getRow(8).values = ['']
    worksheet.getCell('A8').value = 'Number:'
    worksheet.getCell('B8').value = 'N.I.F:'
    worksheet.mergeCells('B8:E8')
    worksheet.getRow(9).values = ['']
    worksheet.getCell('B9').value = 'EORI:'
    worksheet.mergeCells('B9:E9')
    worksheet.getRow(10).values = ['']
    worksheet.getCell('B10').value = 'REX:'
    worksheet.mergeCells('B10:E10')
    worksheet.mergeCells('A8:A10')
    // 第十一行
    worksheet.getRow(11).values = ['']
    worksheet.getCell('A11').value = 'E-mail Address:'
    worksheet.getCell('B11').value = ''
    worksheet.mergeCells('B11:E11')
    // 第十二行
    worksheet.getRow(12).values = ['']
    worksheet.getCell('A12').value = 'Tel:'
    worksheet.getCell('B12').value = ''
    worksheet.mergeCells('B12:E12')
    // 空行
    worksheet.getRow(13).values = ['']
    worksheet.mergeCells('A13:E13')
    // 第十三行列表表头
    worksheet.getRow(14).values = header
    worksheet.getCell('A14').width = 30
    worksheet.getCell('B14').width = 30
    // 插入列表
    const Table = worksheet.addRows(dataList)
    // 列表汇总
    worksheet.getRow(14 + dataList.length + 1).values = ['', '', `${prpos.capitalTotal.quantity_total}`, '', `${utils.currencType('USD') + prpos.capitalTotal.amount_total}`]
    // 底部
    worksheet.getRow(15 + dataList.length + 1).values = ['']
    worksheet.getRow(16 + dataList.length + 1).values = ['']
    worksheet.getRow(17 + dataList.length + 1).values = ['']
    worksheet.getCell(15 + dataList.length + 1, 1).value = `${prpos.capitalTotal.capital}`
    worksheet.getCell(16 + dataList.length + 1, 5).value = `${prpos.invoiceInfo.name}`
    worksheet.getCell(17 + dataList.length + 1, 5).value = `Cristiano Ronaldo`
    worksheet.mergeCells(15 + dataList.length + 1, 1, 15 + dataList.length + 1, 5)
    worksheet.mergeCells(16 + dataList.length + 1, 1, 16 + dataList.length + 1, 4)
    worksheet.mergeCells(17 + dataList.length + 1, 1, 17 + dataList.length + 1, 4)
    // 导出excel表样式
    for (let num = 0; num < worksheet.lastRow._number; num++) { // 循环出每一行
        for (let index = 0; index < 5; index++) { // 循环出每一个单元格
            if (num > 0) {
                worksheet.getRow(num + 1).height = 22
            }
            worksheet.getRow(num + 1).getCell(index + 1).border = { // 为单元格添加边框
                top: { style: 'thin' },
                left: { style: 'thin' },
                bottom: { style: 'thin' },
                right: { style: 'thin' }
            }
            worksheet.getRow(num + 1).getCell(index + 1).alignment = { vertical: 'middle', horizontal: 'center' };
            worksheet.getRow(num + 1).getCell(index + 1).font = { name: 'Times New Roman', size: 10, bold: true };
        }
    }
    Table.font = { size: 12 }
    worksheet.getRow(6).height = 36
    worksheet.getRow(7).height = 26
    worksheet.getCell('A2').font = { size: 18, family: 2, bold: true }
    worksheet.getCell('A1').alignment = { vertical: 'middle', horizontal: 'center' };
    worksheet.getCell('A2').alignment = { vertical: 'middle', horizontal: 'center' };
    worksheet.getCell('A4').alignment = { vertical: 'middle', horizontal: 'right' };
    worksheet.getCell('B3').alignment = { vertical: 'middle', horizontal: 'left', wrapText: true };
    worksheet.getCell('E3').alignment = { vertical: 'middle', horizontal: 'left', wrapText: true };
    worksheet.getCell('E4').alignment = { vertical: 'middle', horizontal: 'left', wrapText: true };
    worksheet.getCell('B5').alignment = { vertical: 'middle', horizontal: 'left', wrapText: true };
    worksheet.getCell('B6').alignment = { vertical: 'middle', horizontal: 'left', wrapText: true };
    worksheet.getCell('B7').alignment = { vertical: 'middle', horizontal: 'left', wrapText: true };
    worksheet.getCell('B8').alignment = { vertical: 'middle', horizontal: 'left', wrapText: true };
    worksheet.getCell('B9').alignment = { vertical: 'middle', horizontal: 'left', wrapText: true };
    worksheet.getCell('B10').alignment = { vertical: 'middle', horizontal: 'left', wrapText: true };
    worksheet.getCell('B11').alignment = { vertical: 'middle', horizontal: 'left', wrapText: true };
    worksheet.getCell('B12').alignment = { vertical: 'middle', horizontal: 'left', wrapText: true };
    worksheet.getCell(15 + dataList.length + 1, 1).alignment = { vertical: 'middle', horizontal: 'left', wrapText: true };
    worksheet.getCell(16 + dataList.length + 1, 5).alignment = { vertical: 'middle', horizontal: 'left', wrapText: true };
    worksheet.getCell(17 + dataList.length + 1, 5).alignment = { vertical: 'middle', horizontal: 'left', wrapText: true };
    worksheet.getCell('A4').border = {
        bottom: { style: 'thin', color: { argb: '000000' } },
        right: { style: 'dashDot', color: { argb: 'FFFFFF' } },
        top: { style: 'thin', color: { argb: '000000' } },
        left: { style: 'thin', color: { argb: '000000' } },
    }
    worksheet.getCell('D4').border = {
        bottom: { style: 'thin', color: { argb: '000000' } },
        right: { style: 'dashDot', color: { argb: 'FFFFFF' } },
        top: { style: 'thin', color: { argb: '000000' } },
        left: { style: 'dashDot', color: { argb: 'FFFFFF' } },
    }
    worksheet.getCell('E4').border = {
        bottom: { style: 'thin', color: { argb: '000000' } },
        right: { style: 'thin', color: { argb: '000000' } },
        top: { style: 'thin', color: { argb: '000000' } },
        left: { style: 'dashDot', color: { argb: 'FFFFFF' } },
    }
    worksheet.getCell('A5').border = {
        bottom: { style: 'thin', color: { argb: '000000' } },
        right: { style: 'dashDot', color: { argb: 'FFFFFF' } },
        top: { style: 'thin', color: { argb: '000000' } },
        left: { style: 'thin', color: { argb: '000000' } },
    }
    worksheet.getCell('B5').border = {
        bottom: { style: 'thin', color: { argb: '000000' } },
        right: { style: 'thin', color: { argb: '000000' } },
        top: { style: 'thin', color: { argb: '000000' } },
        left: { style: 'dashDot', color: { argb: 'FFFFFF' } },
    }
    worksheet.getCell('A6').border = {
        bottom: { style: 'thin', color: { argb: '000000' } },
        right: { style: 'dashDot', color: { argb: 'FFFFFF' } },
        top: { style: 'thin', color: { argb: '000000' } },
        left: { style: 'thin', color: { argb: '000000' } },
    }
    worksheet.getCell('B6').border = {
        bottom: { style: 'thin', color: { argb: '000000' } },
        right: { style: 'dashDot', color: { argb: 'FFFFFF' } },
        top: { style: 'thin', color: { argb: '000000' } },
        left: { style: 'dashDot', color: { argb: 'FFFFFF' } },
    }
    worksheet.getCell('D6').border = {
        bottom: { style: 'thin', color: { argb: '000000' } },
        right: { style: 'thin', color: { argb: '000000' } },
        top: { style: 'thin', color: { argb: '000000' } },
        left: { style: 'dashDot', color: { argb: 'FFFFFF' } },
    }
    worksheet.getCell('A7').border = {
        bottom: { style: 'thin', color: { argb: '000000' } },
        right: { style: 'dashDot', color: { argb: 'FFFFFF' } },
        top: { style: 'thin', color: { argb: '000000' } },
        left: { style: 'thin', color: { argb: '000000' } },
    }
    worksheet.getCell('B7').border = {
        bottom: { style: 'thin', color: { argb: '000000' } },
        right: { style: 'thin', color: { argb: '000000' } },
        top: { style: 'thin', color: { argb: '000000' } },
        left: { style: 'dashDot', color: { argb: 'FFFFFF' } },
    }
    worksheet.getCell('A8').border = {
        bottom: { style: 'dashDot', color: { argb: 'FFFFFF' } },
        right: { style: 'dashDot', color: { argb: 'FFFFFF' } },
        top: { style: 'thin', color: { argb: '000000' } },
        left: { style: 'thin', color: { argb: '000000' } },
    }
    worksheet.getCell('B8').border = {
        bottom: { style: 'dashDot', color: { argb: 'FFFFFF' } },
        right: { style: 'thin', color: { argb: '000000' } },
        top: { style: 'dashDot', color: { argb: 'FFFFFF' } },
        left: { style: 'dashDot', color: { argb: 'FFFFFF' } },
    }
    worksheet.getCell('B9').border = {
        bottom: { style: 'dashDot', color: { argb: 'FFFFFF' } },
        right: { style: 'thin', color: { argb: '000000' } },
        top: { style: 'dashDot', color: { argb: 'FFFFFF' } },
        left: { style: 'dashDot', color: { argb: 'FFFFFF' } },
    }
    worksheet.getCell('B10').border = {
        bottom: { style: 'dashDot', color: { argb: 'FFFFFF' } },
        right: { style: 'thin', color: { argb: '000000' } },
        top: { style: 'dashDot', color: { argb: 'FFFFFF' } },
        left: { style: 'dashDot', color: { argb: 'FFFFFF' } },
    }
    worksheet.getCell('A11').border = {
        bottom: { style: 'dashDot', color: { argb: 'FFFFFF' } },
        right: { style: 'dashDot', color: { argb: 'FFFFFF' } },
        top: { style: 'dashDot', color: { argb: 'FFFFFF' } },
        left: { style: 'thin', color: { argb: '000000' } },
    }
    worksheet.getCell('B11').border = {
        bottom: { style: 'thin', color: { argb: '000000' } },
        right: { style: 'thin', color: { argb: '000000' } },
        top: { style: 'thin', color: { argb: '000000' } },
        left: { style: 'dashDot', color: { argb: 'FFFFFF' } },
    }
    worksheet.getCell('A12').border = {
        bottom: { style: 'thin', color: { argb: '000000' } },
        right: { style: 'dashDot', color: { argb: 'FFFFFF' } },
        top: { style: 'dashDot', color: { argb: 'FFFFFF' } },
        left: { style: 'thin', color: { argb: '000000' } },
    }
    worksheet.getCell('B12').border = {
        bottom: { style: 'thin', color: { argb: '000000' } },
        right: { style: 'thin', color: { argb: '000000' } },
        top: { style: 'thin', color: { argb: '000000' } },
        left: { style: 'dashDot', color: { argb: 'FFFFFF' } },
    }
    worksheet.getCell(15 + dataList.length + 1, 1).border = {
        bottom: { style: 'dashDot', color: { argb: 'FFFFFF' } },
        right: { style: 'thin', color: { argb: '000000' } },
        top: { style: 'thin', color: { argb: '000000' } },
        left: { style: 'thin', color: { argb: '000000' } },
    }
    worksheet.getCell(16 + dataList.length + 1, 1).border = {
        bottom: { style: 'dashDot', color: { argb: 'FFFFFF' } },
        top: { style: 'dashDot', color: { argb: 'FFFFFF' } },
        right: { style: 'dashDot', color: { argb: 'FFFFFF' } },
        left: { style: 'thin', color: { argb: '000000' } },
    }
    worksheet.getCell(17 + dataList.length + 1, 1).border = {
        bottom: { style: 'thin', color: { argb: '000000' } },
        right: { style: 'dashDot', color: { argb: 'FFFFFF' } },
        left: { style: 'thin', color: { argb: '000000' } },
    }
    worksheet.getCell(16 + dataList.length + 1, 5).border = {
        top: { style: 'dashDot', color: { argb: 'FFFFFF' } },
        left: { style: 'dashDot', color: { argb: 'FFFFFF' } },
        right: { style: 'thin', color: { argb: '000000' } },
        bottom: { style: 'thin', color: { argb: '000000' } },
    }
    worksheet.getCell(17 + dataList.length + 1, 5).border = {
        top: { style: 'thin', color: { argb: '000000' } },
        left: { style: 'dashDot', color: { argb: 'FFFFFF' } },
        right: { style: 'thin', color: { argb: '000000' } },
        bottom: { style: 'thin', color: { argb: '000000' } },
    }
    workbook.xlsx.writeBuffer().then((buffer) => {
        const blob = new Blob([buffer], { type: EXCEL_TYPE })
        saveAs(blob, `${expertName}.xlsx`)
    })
}
</script>
<style lang="less" scoped>
.exports {
    img {
        width: 100%;
        height: 100px;
    }
}
</style>